<!-- eslint-disable -->
<template>
  <div class="page-main">
    <el-row class="list-search">
      <div class="content-search">
        <el-form :inline="true" :model="data" @submit.native.prevent>
          <el-form-item label="用户">
            <el-input v-model="data.user_id" type="text" size="small" placeholder="请输入用户" clearable></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="data.no" type="text" size="small" placeholder="请输入订单编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="支付状态">
            <el-select v-model="data.is_pay" size="small" placeholder="请选择支付状态" clearable>
              <el-option
                    v-for="item in [
                      { value: -1, label: '不限' },
                      { value: '0', label: '未支付' },
                      { value: '1', label: '已支付' },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="data.status" size="small" placeholder="请选择订单状态" clearable>
              <el-option
                    v-for="item in [
                      { value: '1', label: 'select选项1' },
                      { value: '2', label: 'select选项2' },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="data.type" size="small" placeholder="请选择类型" clearable>
              <el-option
                    v-for="item in [
                      { value: -1, label: '所有订单' },
                      { value: '1', label: '实物订单' },
                      { value: '2', label: '预约服务订单' },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" class="search-item-auto">
            <el-date-picker
              size="small"
              v-model="data.created_at"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="创建时间开始时间"
              end-placeholder="创建时间结束时间"
              clearable>
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search">搜 索</el-button>
            <el-button size="small" @click="searchReset">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="separate-search"></div>
    </el-row>

    <el-row class="list-header">
      <div class="header-div">
        <div class="list-title">订单列表</div>
        <div class="div-header-btn">
          <!-- <el-button type="primary" size="small" @click="editTmp()">新 增</el-button> -->
          <el-radio-group v-model="data.status" @change="search" size="small">
            <el-radio-button label="-1">所有订单</el-radio-button>
            <el-radio-button label="0">待支付</el-radio-button>
            <el-radio-button label="1">待发货</el-radio-button>
            <el-radio-button label="2">待收货</el-radio-button>
            <el-radio-button label="3">待评价</el-radio-button>
            <el-radio-button label="4">已完成</el-radio-button>
            <el-radio-button label="5">退款售后</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-row>

    <el-row>
      <el-table :data="dataList" v-loading="loading" size="medium" border
        :cell-style="{ padding: '8px 0' }"
        :header-cell-style="{ fontWeight: 'bold', color: '#333', backgroundColor: '#FAFAFA' }">
        <el-table-column prop="id" label="编号" width="70"></el-table-column>
        <el-table-column prop="user_id" label="用户" min-width="100"></el-table-column>
        <el-table-column prop="no" label="订单编号" min-width="100"></el-table-column>
        <el-table-column prop="total_money" label="订单总价" min-width="100"></el-table-column>
        <el-table-column prop="payd_at" label="支付时间" min-width="100"></el-table-column>
        <el-table-column prop="send_at" label="发货时间" min-width="100"></el-table-column>
        <el-table-column prop="overd_at" label="收货时间" min-width="100"></el-table-column>
        <el-table-column prop="is_pay" label="支付状态" min-width="100">
          <template slot-scope="scope">
            {{scope.row.is_pay}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" min-width="100">
          <template slot-scope="scope">
            {{scope.row.status}}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" min-width="100">
          <template slot-scope="scope">
            {{scope.row.type}}
          </template>
        </el-table-column>
        <el-table-column prop="is_write" label="核销" min-width="100">
          <template slot-scope="scope">
            {{scope.row.is_write}}
          </template>
        </el-table-column>
        <el-table-column prop="address_name" label="收货人姓名" min-width="100"></el-table-column>
        <el-table-column prop="address_phone" label="收货人电话" min-width="100"></el-table-column>
        <el-table-column prop="province_name" label="收货地址省名称" min-width="100"></el-table-column>
        <el-table-column prop="city_name" label="收货地址市名称" min-width="100"></el-table-column>
        <el-table-column prop="area_name" label="收货地址区名称" min-width="100"></el-table-column>
        <el-table-column prop="address_detail" label="收货地址详细地址" min-width="100"></el-table-column>
        <el-table-column prop="created_at" label="创建时间" min-width="100"></el-table-column>
        <el-table-column label="操作" min-width="170">
          <template slot-scope="scope">
            <el-button @click="editTmp(scope.row)" type="text" size="mini">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm
              @confirm="del(scope.row.id)"
              icon="el-icon-warning"
              placement="top"
              title="是否要删除此行？">
              <el-button size="mini" type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row class="pagination pagination-news">
      <div class="pagination-div">
        <div class="total-con">
          <div class="pagination-total">共 <em> {{totalCount}} </em> 条记录</div>
        </div>
        <el-pagination
          @current-change="changePage"
          @size-change="changePageSize"
          background
          :layout="pageLayout"
          :page-sizes="pagePageSizes"
          :page-size="pagePageSize"
          :total="totalCount"
          :current-page.sync="current_page"
          :hide-on-single-page="false">
        </el-pagination>
      </div>
    </el-row>

    <ordersForm @refreshPage="refreshPage" ref="refOrdersForm"></ordersForm>
  </div>
</template>

<!-- eslint-disable -->
<script>
  import {OrdersIndex, OrdersDel} from '@/utils/request.js'
  import ordersForm from './orders-form'
  import '@/assets/css/news.css';

  export default {
    components: { ordersForm },
    data(){
      return {
        data: {
          page: 1,
          page_size: this.pagePageSize,
          is_pay: -1,
          type: -1,
          status: -1,
        },
        dataList: [],
        loading: false,
        totalCount: 0,
        current_page: 1,
      }
    },
    activated() {
      this.data.page = 1
      this.current_page = 1
      this.getList()
    },
    methods: {
      changePage(page) {
        this.data.page = page
        this.getList()
      },
      changePageSize(size) {
        this.data.page_size = size
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      refreshPage() {
        this.data.page--
        this.getList()
      },
      getList() {
        this.loading = true
        OrdersIndex(this.data).then((res) => {
          if (res.code == 200) {
            this.data.page++
            this.dataList = res.data.data
            this.totalCount = res.data.count
          } else {
            this.$message.error('数据获取失败!')
          }
          this.loading = false
        })
      },
      del(id) {
        OrdersDel({id: id}).then((res) => {
      	  if (res.code == 200) {
            this.refreshPage()
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
        })
      },
      editTmp(row) {
        if (row) {
          this.$refs.refOrdersForm.editTmp(row)
        } else {
          this.$refs.refOrdersForm.dialogFormVisible = true
        }
      },
      search() {
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      searchReset() {
        this.data = {
          page: 1,
          page_size: this.data.page_size
        }
      },
    }
  }
</script>

<style>
</style>
